<template>
	<view v-if="load">
		<view class='header-box'>
			<view class="header-color-box" v-if="info.state == 1">
				<view v-if="info.total_price > 0">
					<span class="state-text">待支付</span>
					<span class="memo-text">您的订单将于{{str}}后失效，请尽快支付~</span>
				</view>
				<view v-else>
					<span class="state-text">待确认</span>
					<span class="memo-text">您的订单将于{{str}}后失效，请尽快确认提交到保司~</span>
				</view>
			</view>
			<view class="header-cancel-box" v-if="info.state == 0">
				<span class="state-text">已取消</span>
				<span class="memo-text">您的订单被已取消~</span>
			</view>
			<view class="header-color-box" v-if="info.state == 2">
				<span class="state-text">已支付</span>
				<span class="memo-text">批增{{info.inc_num}}人，批减{{info.dec_num}}人~</span>
			</view>
		</view>
		<view class="info-box">
			<view class="title-box">
				<view class="title-line-box"></view>
				<view class="title-text-box">
					批改保单
				</view>
			</view>
			<view class="info-content-box">
				<view> 保单号</view>
				<view class="info-value-box">
					{{info.order_no}}
				</view>
			</view>
			<view class="info-content-box">
				<view> 批单号</view>
				<view class="info-value-box">
					{{info.pd_no ? info.pd_no : '----'}}
				</view>
			</view>
			<view class="info-content-box">
				<view> 生效日期</view>
				<view class="info-value-box">
					{{info.start_time}}
				</view>
			</view>
			<view class="info-content-box">
				<view> 合计保费</view>
				<view class="info-value-box">
					￥{{info.total_price}}
				</view>
			</view>
			<view class="info-content-box" v-if="info.url">
				<view> 批单下载</view>
				<view class="info-value-box">
					<a :href="info.url">点击下载</a>
				</view>
			</view>
		</view>
		<view class="info-user-box">
			<view class="title-box">
				<view class="title-line-box"></view>
				<view class="title-text-box">
					批增人员
				</view>
			</view>
			<view v-for="(item,key) in info.incuser">
				<view class="user-item-box" v-show="key < 2 || incShow == 1">
					<view class="user-line-box">
						<view> {{item.name}}</view>
						<view class="user-value-box">
							{{item.id_card}}
						</view>
					</view>
					<view class="user-line-box">
						<view> 生效时间</view>
						<view class="user-value-box">
							{{item.start_time}}
						</view>
					</view>
					<view class="user-line-box">
						<view> 失效时间</view>
						<view class="user-value-box">
							{{item.end_time}}
						</view>
					</view>
				</view>
			</view>
			<view class="view-show-box" @click="changeShow(1)" v-if="info.incuser.length > 2">
				<span class="view-text">查看更多 </span>
				<span v-if="incShow == 0">
					<image class='icon-image-box' src="https://jy-shops.oss-cn-beijing.aliyuncs.com/images/icon/down-icon.png"></image>
				</span>
				<span v-else>
					<image class='icon-image-box' src="https://jy-shops.oss-cn-beijing.aliyuncs.com/images/icon/up-icon.png"></image>
				</span>
			</view>
		</view>
		<view class="info-user-box" v-if="info.decuser.length > 0">
			<view class="title-box">
				<view class="title-line-box"></view>
				<view class="title-text-box">
					批减人员
				</view>
			</view>
			<view v-for="(item,k) in info.decuser">
				<view class="user-item-box" v-show="k < 2 || decShow == 1">
					<view class="user-line-box">
						<view> {{item.name}}</view>
						<view class="user-value-box">
							{{item.id_card}}
						</view>
					</view>
					<view class="user-line-box">
						<view> 生效时间</view>
						<view class="user-value-box">
							{{item.start_time}}
						</view>
					</view>
					<view class="user-line-box">
						<view> 失效时间</view>
						<view class="user-value-box">
							{{item.end_time}}
						</view>
					</view>
				</view>
			</view>
			<view class="view-show-box" @click="changeShow(2)"  v-if="info.decuser.length > 2">
				<span class="view-text">查看更多 </span>
				<span v-if="decShow == 0">
					<image class='icon-image-box' src="https://jy-shops.oss-cn-beijing.aliyuncs.com/images/icon/down-icon.png"></image>
				</span>
				<span v-else>
					<image class='icon-image-box' src="https://jy-shops.oss-cn-beijing.aliyuncs.com/images/icon/up-icon.png"></image>
				</span>
			</view>
		</view>
		<view class="footer-agree" v-if="info.state == 1">
			<view class="form-item-body footer-agree-body">
				<view class="form-label-1" @tap="changeAgree" >
					<image v-if="is_agree" src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/h5/form-three-check.png" mode="widthFix" class="form-check-icon1 form-check-left"></image>
					<view v-else class="form-check-no1 form-check-left"></view>
				</view>
				<view class="form-content-1" >
					<text>本人承诺信息真实有效，理解同意</text>
					<text @tap="toRich(1)" class="form-content-blue">《投保须知》</text>
					<text @tap="toRich(2)" class="form-content-blue">《客户告知》</text>
					<text @tap="toRich(3)" class="form-content-blue">《特别约定》</text>
					<text @tap="toRich(4)" class="form-content-blue">《责任免除》</text>
				</view>
				
			</view>
		</view>
		<view class="footer-agree-lines" v-if="info.state == 1"></view>
		<view class="bx-lines" v-if="info.state == 1"></view>
		<view class="bx-footer" v-if="info.state == 1">
			<view class="bx-footer-left">
				<view class="bx-footer-price">
					合计保费：<span class="bx-footer-price-text">{{info.total_price}}</span>
				</view>
				<view class="bx-footer-num">
					批增{{info.inc_num}}人，批减{{info.dec_num}}人
				</view>
			</view>
			<view class="bx-footer-cancel" @tap="cancel()" >取消</view>
			<view class="bx-footer-right" @tap="submit()" v-if="info.total_price > 0">立即支付</view>
			<view class="bx-footer-right" @tap="nopay()" v-else>确定提交</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				id : 0,
				load : false,
				info:{
					incuser:[],
					decuser:[],
				},
				incShow:0,
				decShow:0,
				is_agree:false,
				timer:'',
				str:'00小时00分钟00秒',
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getData();
		},
		methods:{
			nopay(){
				uni.showLoading({
					mask:true,
					title:"数据加载中"
				})
				this.ajax( this.info.type == 1 ? 'user/updateOrderNoPay' : 'paorder/updateOrderNoPay',{
					data:{id:this.id},
					success:(res) => {
						uni.hideLoading()
						if(res.code){
							this.getData();
						}else{
							this.toast(res.msg);
						}
					}
				})
			},
			submit(){
				uni.showLoading({
					mask:true,
					title:"数据加载中"
				})
				this.ajax( this.info.type == 1 ? 'user/updateOrderPay' : 'paorder/updateOrderPay' ,{
					data:{id:this.id},
					success:(res) => {
						uni.hideLoading()
						if(res.code){
							window.open(res.msg);
						}else{
							this.toast(res.msg);
						}
					}
				})
			},
			setTime(num){
				console.log(num);
				var h = 0;
				var m = 0;
				var s = 0;
				this.timer = setInterval(()=>{
					if(num > 0) {
						num --;
						h = Math.floor(num / 3600);
						m = Math.floor((num % 3600) / 60);
						s = Math.floor((num % 3600) % 60);
						this.str = (h < 10 ? "0"+h : h)+'小时'+(m < 10 ? "0"+m : m)+'分钟'+(s < 10 ? "0"+s : s)+'秒';
					} else {
						clearInterval(this.timer);
						//请求数据取消订单
						this.ajax(this.info.type == 1 ?  'user/cancelEndorse' :  'paorder/cancelEndorse',{
							data:{id:this.id},
							success:(res) => {
								if(res.code){
									this.getData();
								}
							}
						})
					}
				},1000);
			},
			cancel(){
				uni.showLoading({
					mask:true,
					title:"数据加载中"
				})
				this.aj
				this.ajax( this.info.type == 1 ?  'user/cancelEndorse' :  'paorder/cancelEndorse',{
					data:{
						id: this.id,
					},
					success:(res) => {
						uni.hideLoading()
						this.toast(res.msg);
						if(res.code){
							this.getData();
						}
					}
				});
			},
			changeAgree(){
				this.is_agree = !this.is_agree;
			},
			toRich(type){
				if(type == 3) {
					if(this.id == 1 && !this.is_three)type = 9;
					if(this.id == 2 && this.is_three)type = 10;
					if(this.id == 2 && !this.is_three)type = 11;
				}
				uni.navigateTo({
					url:'/pages/index/rich?type='+type
				})
			},
			toBd(url){
				location.href = url;
			},
			changeShow(num){
				if(num == 1)this.incShow = this.incShow ? 0 : 1;
				if(num == 2)this.decShow = this.decShow ? 0 : 1;
			},
			getData(){
				uni.showLoading({
					title:'加载中'
				})
				this.ajax('user/getEndorseInfo',{
					data:{
						id: this.id,
					},
					success:(res) => {
						uni.hideLoading();
						this.info = res.msg;
						this.load = true;
						this.setTime(this.info.num);
						
					}
				});
			}
		}
	}
</script>

<style>
	@import url("@/static/css/order/endorse.css");
</style>
